<template>
  <div class="app-container">
    <!--多条件查询表单-->
    <div class="search-bar">
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="margin-left: 20px; margin-top: 12px"
      >
        <el-form-item label="作业区">
          <el-select
            v-model="searchForm.ledger_area"
            clearable
            filterable
            placeholder="请选择作业区"
            size="medium"
          >
            <el-option
              v-for="(item, i) in opeArea"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="井号">
          <el-input
            v-model="searchForm.ledger_well_name"
            clearable
            placeholder="请输入井号"
            size="medium"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
          >查询</el-button>
          <el-button type="default" @click="resetData">清空</el-button>
        </el-form-item>
        <el-button
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="useExportUtil"
        >
          导出
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="hide"
        >
          新增
        </el-button>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        max-height="900"
        border
        style="width: 100%;font-size: 13px"
        :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
        :row-style="{height:'25px'}"
        :cell-style="{padding:'1px'}"
        :row-class-name="tableRowClassName"
        @cell-click="tabClick"
      >
        >
        <!--      <el-table-column prop="date" label="序号" width="50" align="center" fixed>-->
        <!--        <template slot-scope="scope">-->
        <!--          {{ (page - 1) * limit + scope.$index + 1 }}-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column type="index" width="50" fixed />
        <el-table-column
          fixed
          prop="ledger_well_name"
          label="井号"
          sortable
          align="center"
        />
        <el-table-column
v-if="this.ID_show"
          fixed
          prop="ledger_well_id"
          label="ID"
          sortable
          align="center"
        />

        <el-table-column prop="ledger_station_no" label="站号" width="80" align="center" />

        <el-table-column
          prop="ledger_area"
          label="作业区"
          width="120px"
          sortable
          align="center"
        />

        <el-table-column prop="ledger_block" label="区块" width="160" align="center" />
        <el-table-column
          prop="ledger_experience_cycle"
          label="经验周期"
          align="center"
        />
        <el-table-column
          prop="ledger_alarm_cycle"
          label="预警周期"
          align="center"
        />
        <el-table-column
          prop="ledger_check_cycle"
          label="核定周期"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '核定周期'">
              <el-input v-model="scope.row.ledger_check_cycle" style="max-width: 90px" @blur="inputBlur(scope.row)" />
              <el-button type="primary" style="margin-top: 2px; " icon="el-icon-edit" @click="motifiy(scope.row.ledger_check_cycle,scope.row.ledger_well_name)">修改</el-button>
            </span>
            <span v-else>{{ scope.row.ledger_check_cycle }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ledger_pump_diameter" label="泵径" align="center" />

        <el-table-column prop="ledger_stroke" label="冲程" align="center" />

        <el-table-column prop="ledger_stroke_number" label="冲数" align="center" />

        <el-table-column prop="ledger_nissan_liquid" label="日产液" sortable align="center" />

        <el-table-column prop="ledger_nissan_oil" label="日产油" sortable align="center" />

        <el-table-column prop="ledger_daily_water" label="含水" sortable align="center" />

        <el-table-column prop="ledger_pump_depth" label="泵深" align="center" />

        <el-table-column
          prop="ledger_watertype"
          label="地层水型"
          width="120px"
          align="center"
        />

        <el-table-column
          prop="ledger_salinity"
          label="矿化度"
          align="center"
        />

        <el-table-column
          prop="ledger_craft"
          label="清防蜡工艺"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.ledger_craft == '1'
                ? '热洗'
                : scope.row.ledger_craft == '2'
                  ? '化防'
                  : scope.row.ledger_craft == '3'
                    ? '化防+热洗'
                    : '冷洗'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ledger_dosing_cycle"
          label="加药周期"
          align="center"
        />

        <el-table-column
          prop="ledger_dosage_amount"
          label="加药用量"
          align="center"
        />

        <el-table-column
          prop="ledger_hotwash_cycle"
          label="热洗周期"
          align="center"
        />

        <el-table-column
          prop="ledger_hotwash_amount"
          label="热洗用量"
          align="center"
        />

        <el-table-column
          prop="ledger_antiwax_lastdate"
          label="最后一次清防蜡日期"
          width="160px"
          sortable
          align="center"
        />

        <el-table-column
          prop="ledger_production_days"
          label="正常生产天数"
          align="center"
        />

        <el-table-column
          prop="ledger_checkpump_lastdate"
          label="最近一次检泵日期"
          width="160px"
          sortable
          align="center"
        />

        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="primary"
              style="margin:2px"
              size="mini"
              @click="modify(scope.row)"
            >修改</el-link>
          </template>
        </el-table-column>
      </el-table></div>
    <div id="page" style="position: relative">
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
      <div class="jumpstyle">
        到 <input v-model="jumpPage" class="int01" type="text"> 页<el-button style="margin: 0 0 0 5px" type="primary" size="mini" @click="test(jumpPage)">跳转</el-button>
      </div>
    </div>
    <el-dialog title="修改" :visible.sync="dialogUpdateFormVisible">
      <el-form ref="modifyForm" :model="form" :rules="rules">
        <el-form-item
          label="井号"
          :label-width="formLabelWidth"
          style="width: 300px"
        >
          <el-input v-model="form.ledger_well_name" readonly />
        </el-form-item>
        <el-form-item
          label="清防蜡工艺"
          :label-width="formLabelWidth"
          style="width: 300px"
          prop="ledger_craft"
        >
          <el-select v-model="form.ledger_craft" placeholder="请选择工艺">
            <el-option label="热洗" value="1" />
            <el-option label="化防" value="2" />
            <el-option label="化防+热洗" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="地层水型"
          prop="ledger_watertype"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_watertype" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="矿化度"
          prop="ledger_salinity"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_salinity" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="加药周期(天)"
          prop="ledger_dosing_cycle"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_dosing_cycle" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="加药用量"
          prop="ledger_dosage_amount"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_dosage_amount" oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="热洗周期(天)"
          prop="ledger_hotwash_cycle"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_hotwash_cycle" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="热洗用量"
          prop="ledger_hotwash_amount"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.ledger_hotwash_amount" oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 200px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="dialogUploadFormVisible">
      <el-form ref="modifyForm" :model="loadform">
        <el-form-item
          label="井号"
          :label-width="formLabelWidth"
          style="width: 300px"
        >
          <el-input v-model="loadform.ledger_well_name" />
        </el-form-item>
        <el-form-item
          label="经验周期"
          :label-width="formLabelWidth"
          style="width: 300px"
        >
          <el-input v-model="loadform.ledger_experience_cycle" />
        </el-form-item>
        <el-form-item
          label="核定周期"
          :label-width="formLabelWidth"
          style="width: 300px"
        >
          <el-input v-model="loadform.ledger_check_cycle" />
        </el-form-item>
        <el-form-item
          label="清防蜡工艺"
          :label-width="formLabelWidth"
          style="width: 300px"
          prop="ledger_craft"
        >
          <el-select v-model="loadform.ledger_craft" placeholder="请选择工艺">
            <el-option label="热洗" value="1" />
            <el-option label="化防" value="2" />
            <el-option label="化防+热洗" value="3" />
            <!--            <el-option label="冷洗" value="4" />-->
          </el-select>
        </el-form-item>
        <el-form-item
          label="地层水型"
          prop="ledger_watertype"
          :label-width="formLabelWidth"
        >
          <el-input v-model="loadform.ledger_watertype" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="矿化度"
          prop="ledger_salinity"
          :label-width="formLabelWidth"
        >
          <el-input v-model="loadform.ledger_salinity" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="加药周期(天)"
          prop="ledger_dosing_cycle"
          :label-width="formLabelWidth"
        >
          <el-input v-model.number="loadform.ledger_dosing_cycle" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="加药用量"
          prop="ledger_dosage_amount"
          :label-width="formLabelWidth"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <el-input v-model="loadform.ledger_dosage_amount" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="热洗周期(天)"
          prop="ledger_hotwash_cycle"
          :label-width="formLabelWidth"
        >
          <el-input v-model="loadform.ledger_hotwash_cycle" :precision="2" style="width: 200px" />
        </el-form-item>
        <el-form-item
          label="热洗用量"
          prop="ledger_hotwash_amount"
          :label-width="formLabelWidth"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <el-input v-model="loadform.ledger_hotwash_amount" style="width: 200px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import excelUtil from '@/utils/dealwithExcelUtil.js'
import Pagination from '@/components/pagination'

export default {
  // 写核心代码

  components: {
    Pagination
  },
  // 定义变量初始值
  data() {
    return {
      ID_show: false,
      jumpPage: '',
      dialogUpdateFormVisible: false,
      dialogUploadFormVisible: false,
      downloadLoading: false,
      searchForm: {},
      list: [],
      page: 1,
      limit: 30,
      total: 0,
      opeArea: ['第一采油作业区', '第二采油作业区', '第三采油作业区', '第五采油作业区', '第七采油作业区', '第八采油作业区', '第九采油作业区', '运行维护一中心'],
      value: '',
      tableData: [],
      wellarea: '',
      dialogFormVisible: false,
      form: {},
      loadform: {},
      rules: {
        ledger_craft: {
          required: false,
          message: '请选择清防蜡工艺',
          trigger: 'change'
        },
        ledger_watertype: {
          required: false,
          message: '请输入地层水型',
          trigger: 'blur'
        },
        ledger_salinity: {
          required: false,
          message: '请输入矿化度',
          trigger: 'blur'
        },
        ledger_dosing_cycle: {
          required: false,
          message: '请输入加药周期'
        },
        ledger_dosage_amount: {
          required: false,
          message: '请输入加药用量'
        },
        ledger_hotwash_cycle: {
          required: false,
          message: '请输入热洗周期'
        },
        ledger_hotwash_amount: {
          required: false,
          message: '请输入热洗用量'
        }
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getListPage(this.page, this.limit, this.searchForm)
  },
  methods: {
    hide() {
      this.dialogUploadFormVisible = true
    },
    upload() {
      this.$refs.modifyForm.validate((valid) => {
        if (valid) {
          this.$http
            .post('/tAntiwaxLedger/upload', this.loadform)
            .then(() => {
              this.$message.success('上传成功')
              this.getListPage(this.page, this.limit, this.searchForm)
              this.dialogUpdateFormVisible = false
              this.form = {}
              // location.reload()
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
    motifiy(ChangeCyc, Changewell) {
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      const formData = new FormData()
      formData.append('wellname', Changewell)
      formData.append('cycle', ChangeCyc)

      this.$http
        .post('/tAntiwaxLedger/ChangeAlarmCyc', formData, config)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success('修改成功')
            this.getListPage(this.page, this.limit, this.searchForm)
            this.dialogUpdateFormVisible = false
            this.form = {}
          } else {
            this.$message.error('修改失败')
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    test(event) {
      console.log('首先我被执行了')
      if (event !== this.page && event !== ' ') {
        console.log('event', event)
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
        this.page = event
        var a = []
        a.push(this.page)
        a.push(30)
        console.log(a, '翻页可以不')
        this.getListPage1(a)
        this.$refs.turnPage.page = this.page
        this.jumpPage = ''
      } else {
        console.log('又有问题里')
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // tabClick row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '核定周期':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
    },
    // 失去焦点初始化
    inputBlur(row) {
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
    getListPage(pageNum, pageSize, data) {
      this.jumpPage = ''
      this.$http
        .post('/tAntiwaxLedger/pageQuery', {
          pageNum,
          pageSize,
          data
        })
        .then(({ data: { data: res }}) => {
          this.tableData = res.records
          this.total = res.total
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 页码变动
    getListPage1(msg) {
      this.jumpPage = ''
      const pageNum = msg[0]
      const pageSize = msg[1]
      const data = this.searchForm
      console.log(pageNum, pageSize, data, 'data')
      this.$http.post('/tAntiwaxLedger/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    // 每页记录数变动
    handleSizeChange(size) {
      const pageSize = this.page
      const pageNum = size
      const data = this.searchForm
      this.$http.post('/tAntiwaxLedger/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    changePage(pageNum, pageSize) {
      this.getListPage(pageNum, pageSize, this.searchForm)
    },
    search() {
      this.page = 1
      this.getListPage(this.page, this.limit, this.searchForm)
    },
    resetData() {
      this.searchForm = {}
    },
    modify(data) {
      this.form = data
      this.dialogUpdateFormVisible = true
    },
    submit() {
      this.$refs.modifyForm.validate((valid) => {
        if (valid) {
          this.$http
            .post('/tAntiwaxLedger/update', this.form)
            .then(() => {
              this.$message.success('修改成功')
              this.getListPage(this.page, this.limit, this.searchForm)
              this.dialogUpdateFormVisible = false
              this.form = {}
              // location.reload()
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },

    useExportUtil() {
      this.downloadLoading = true
      const initColumn = [
        {
          key: 'index',
          title: '#'
        },
        {
          key: 'ledger_well_name',
          title: '井号'
        },
        {
          key: 'ledger_well_id',
          title: 'ID'
        },
        {
          key: 'ledger_station_no',
          title: '站号'
        },
        {
          key: 'ledger_area',
          title: '区队'
        },
        {
          key: 'ledger_experience_cycle',
          title: '经验周期'
        },
        {
          key: 'ledger_alarm_cycle',
          title: '预警周期'
        },
        {
          key: 'ledger_check_cycle',
          title: '核定周期'
        },
        {
          key: 'ledger_block',
          title: '区块'
        },
        {
          key: 'ledger_pump_diameter',
          title: '泵径'
        },
        {
          key: 'ledger_stroke',
          title: '冲程'
        },
        {
          key: 'ledger_stroke_number',
          title: '冲数'
        },
        {
          key: 'ledger_nissan_liquid',
          title: '日产液'
        },
        {
          key: 'ledger_nissan_oil',
          title: '日产油'
        },
        {
          key: 'ledger_daily_water',
          title: '含水'
        },
        {
          key: 'ledger_pump_depth',
          title: '泵深'
        },
        {
          key: 'ledger_watertype',
          title: '地层水型'
        },
        {
          key: 'ledger_salinity',
          title: '矿化度'
        },
        {
          key: 'ledger_craft',
          title: '清防蜡工艺'
        },
        {
          key: 'ledger_dosing_cycle',
          title: '加药周期'
        },
        {
          key: 'ledger_dosage_amount',
          title: '加药用量'
        },
        {
          key: 'ledger_hotwash_cycle',
          title: '热洗周期'
        },
        {
          key: 'ledger_hotwash_amount',
          title: '热洗用量'
        },
        {
          key: 'ledger_antiwax_lastdate',
          title: '最后一次清防蜡日期'
        },
        {
          key: 'ledger_production_days',
          title: '正常生产天数'
        },
        {
          key: 'ledger_checkpump_lastdate',
          title: '最近一次检泵日期'
        }

      ]
      this.$http
        .post('/tAntiwaxLedger/pageQuery', {
          pageNum: 1,
          pageSize: 99999,
          data: this.searchForm
        })
        .then(({ data: { data: res }}) => {
          const tableData = res.records
          tableData.forEach((item, index) => {
            item.index = index
            item.ledger_craft =
              item.ledger_craft == '1'
                ? '热洗'
                : item.ledger_craft == '2'
                  ? '化防'
                  : item.ledger_craft == '3'
                    ? '化防+热洗'
                    : '冷洗'
          })
          excelUtil.exportExcel(initColumn, tableData, '台账表.xlsx')
          this.downloadLoading = false
        }).catch(err => {
          this.downloadLoading = false
          this.$message.error(err)
        })
    }
  }
}
</script>

<style>
.el-dialog {
  width: 30%;
}
.el-dialog__body {
  display: flex;

  justify-content: center;

  align-content: center;
}

#page{
  position: absolute;left: 3%;top:90%;
  width: 80%;
}

.jumpstyle{
  position: absolute;left:55%; top:30%;
  width: 300PX;
}
.int01{
  padding: 0 0px 0 0px;
}

</style>
